<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="host1">This text should have a green background.</div>
<div id="host2">This text should not have a red background.</div>
<script>
    test(() => {
        var root = host1.attachShadow({mode:'open'});
        root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{background:green}"><slot />';
        assert_equals(getComputedStyle(host1).backgroundColor, "rgb(0, 128, 0)", "Host background should be green.");
    }, "Check that :host rule from link stylesheet applies to host element.");

    test(() => {
        var root = host2.attachShadow({mode:'open'});
        root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{background:red}"><slot />';
        assert_equals(getComputedStyle(host2).backgroundColor, "rgb(255, 0, 0)", "Host background should be red.");
        root.querySelector("link").remove();
        assert_equals(getComputedStyle(host2).backgroundColor, "rgba(0, 0, 0, 0)", "Host background should be transparent.");
    }, "Check that :host rule from link stylesheet no longer applies after the sheet is removed.");
</script>
